<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 9:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>注册</title>
<script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
<script src="CSS/bootstrap.min.js"></script>
<link rel="stylesheet" href="CSS/bootstrap.css">
<style type="text/css">
form {
	width: 30%;
	margin: 100px auto auto;
}

h3 {
	text-align: center;
	font-size: 2em;
}
	span{
		margin-left: 150px;
	}
</style>
</head>
<body>

	<%@include file="logo.jsp"%>
	<h3>注册中心</h3>
	<form class="form-horizontal" role="form" method="post"
		action="RegisterServerlet" enctype="multipart/form-data">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">注册账号</label>
			<div class="col-sm-10">
				<input type="text" name="username" class="form-control"
					id="inputEmail3" placeholder="请输入账号" onblur="serchUserName()">
			</div><span></span>
		</div>
		<div class="form-group">
			<label for="inputPassword3" class="col-sm-2 control-label">注册密码</label>
			<div class="col-sm-10">
				<input type="password" name="pwd" class="form-control"
					id="inputPassword3" placeholder="请输入密码">
			</div>
		</div>
		<div class="form-group">
			<label for="inputPassword4" class="col-sm-2 control-label">验证密码</label>
			<div class="col-sm-10">
				<input type="password" name="pwd1" class="form-control"
					id="inputPassword4" placeholder="请再次输入密码">
			</div><span id="ensurepwd"></span>
		</div>
		<div class="form-group">
			<label for="exampleInputFile" class="col-sm-2 control-label">上传头像</label>
			<div class="col-sm-10">
				<input type="file" name="photo" id="exampleInputFile">
			</div>
		</div>

		<div class="form-group">
			<div class="col-sm-offset-2 col-sm-10">
				<button type="submit" class="btn btn-default">注册</button>
				<a href="login.jsp">返回主页</a><span id="result">${requestScope.result}</span>
			</div>
		</div>
	</form>


</body>

<script>
	var xhr;  //初始化对象
	function createXHR() {
		try {
			return new XMLHttpRequest(); //浏览器高版本返回请求对象
        }catch (e) {
			return new ActiveXObject("Microsoft.XMLHTTP"); //浏览器低版本返回请求
        }
    }
    //编写响应函数
    function serchUserName() {
	    xhr = createXHR(); //实例化请求对象
		var username = document.getElementById("inputEmail3").value; //获取输入的用户名
		if (username ==""){
            $("span").text("用户名不能为空!!");
		}else {
            xhr.onreadystatechange = callback; //将属性值赋予回调函数
            xhr.open("POST","CheckUserNameServlet",true);
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send("username="+username);
		}
    }
    
    //编写回调函数
	
	function callback() {
		if (xhr.readyState == "4"&&xhr.status == "200"){  //若服务器响应正常则输出检查结果
		    var xhrvalue = xhr.responseText;  //获取响应结果
			if (xhrvalue == "true"){
			    $("span:first").text("该用户名已经存在,请换其他用户名!!");
			}else {
			    $("span:first").text("该用户名可以使用!!");
			}
		}
    }


    $(function () {

        $("#inputPassword4").blur(function () {
            var $pwdFirst = $("#inputPassword3").val();  //获取初始密码值
            var $pwdEnsure = $("#inputPassword4").val(); //获取验证密码值
            if ($pwdFirst != $pwdEnsure){
                $("#ensurepwd").text("两次密码不一样,请重新输入密码!!");
                $(":submit").attr("disabled","disabled");
                /*$("form").submit(function () {
                    return false;
                })*/
            }else {
                $("#ensurepwd").text("密码正确,可以使用!!");
                $(":submit").attr("disabled",false);
            }
        })

    })



</script>




</html>
